import React, { useState,useEffect } from "react";


const A = ()=>{
    useEffect(()=>{
        console.log('A组件');
        return()=>{
            console.log('A组件销毁了')
        }
    },[])
    return <div>HELLO</div>
}

const App = () => {


    const [num, setNum] = useState(0);
    const [user, setUser] = useState({ username: 'song', age: 17 })
    //更新要调用方法
    //条件语句会改变顺序

    // const res = useState(1);
    const add = () => {
        setNum(num + 1)
    }
    const changeName = () => {
        setUser({ ...user, age: 18 })
        //setUser({age:18})//有错误的输出：因为姓名undefined
        //undefined
        //变量声明不赋值
        //没有的属性
        //少参数
    }
    //刷新就挂载
    //return放到第二个参数空数组的useEffect中，相当于componentWillUnMount卸载
    useEffect(()=>{
        console.log('DidMount');
        console.log('useEffect!!!');
        // fetch()
        // setNum(10);
        return()=>{
            console.log('componentWillUnMount')
        }
    },[])
    //当第二个参数为空数组，useEffect相当于componentDidMount
    //只要更新就可以打印componentDidUpdate
    useEffect(()=>{
        console.log('didUpdate')
    })
    //传入第二个参数，只有第二个参数更新打印
    useEffect(()=>{
        console.log('num didUpdate')
    },[num])

    return (
        <div>
            {num==0?<A />:''}
            <h1>Counter</h1>
            <h2>{num}</h2>
            <h2>{user.username}---{user.age}</h2>

            <button onClick={add}>加1</button>
            <button onClick={changeName}>改名</button>


        </div>)
}

export default App;